<script setup lang="ts">
import {WebDiskSpaceVO} from "@/api/ai/webdiskspace";
import {ArrowDown} from "@element-plus/icons-vue";
import {WebDiskDirApi, WebDiskDirVO} from "@/api/ai/webdiskdir";
import Dir from './dir.vue'
import File from './File.vue'
import {WebDiskFileApi, WebDiskFileVO} from "@/api/ai/webdiskfile";
import FileUploadBatch from "@/views/ai/webdisk/file-upload-batch.vue";
import {Back as BackIcon} from "@element-plus/icons-vue";

const props = defineProps({
  space:{
    required:false,
    type: Object as PropType<WebDiskSpaceVO>
  },
  id:{
    required:true,
    type:String
  },
    flowId:{
      required:false,
      type:String
    }
  
});
//当前文件夹
const currentOpenDir=ref('0')
const searchType=ref('ALL')
const his=reactive<string[]>([])
const fileName=ref<string>()
const dirs=ref<WebDiskDirVO[]>()
const files=ref<WebDiskFileVO[]>()
const loadDirAndFile=async ()=>{
  dirs.value=[]
  files.value=[]
  const query={
    pid:currentOpenDir.value,
    name: fileName.value,
    spaceId:props.id,
  }
  if (searchType.value=="ALL"||searchType.value=="DIR"){
    dirs.value=await WebDiskDirApi.simpleList(query)
  }
  if (searchType.value=="ALL"||searchType.value=="FILE"){
    files.value=await WebDiskFileApi.simpleList(query)
  }
}
const command=async (cmd:string)=>{
  console.log('cmd',cmd)
  if (cmd==='create-dir'){
    await WebDiskDirApi.createWebDiskDir({
      name:'新建文件夹',
      pid:currentOpenDir.value,
      spaceId:props.id,
    })
    ElMessage.success("创建成功")
    await loadDirAndFile()
  }
  if (cmd==='upload-file'){
    uploader.value?.open(true)
  }
}
const updateDir=async (dir:WebDiskDirVO)=>{
  await WebDiskDirApi.updateWebDiskDir(dir)
  await loadDirAndFile()
}
const uploader=ref<InstanceType<typeof FileUploadBatch>>()
const changeDir=async (dir:WebDiskDirVO)=>{
  his.push(currentOpenDir.value)
  currentOpenDir.value = dir.id as string
  await loadDirAndFile()
}
const back= async ()=>{
  console.log('his', his);
  
  if (his.length>0){
    currentOpenDir.value = his.pop() as string;
    await loadDirAndFile()
  }
}
const searchChange=()=>{
  nextTick(()=>{
    loadDirAndFile()
  })
}
// 删除文件
const deleteFile=(data:any)=>{
  ElMessageBox.confirm(
    '确认是否要删除此文件?',
    '系统提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then( async() => {
      if(data.type==='dir'){
      await  WebDiskDirApi.deleteWebDiskDir(data.id)
      }else{
        await WebDiskFileApi.deleteWebDiskFile(data.id)
      }
      ElMessage({
          type: 'success',
          message: '删除成功',
        })
        loadDirAndFile()
    })
}
// 分析文件
const analysisFile=(file:WebDiskFileVO)=>{
  console.log('分析文件', file);
  if(!file.id) {
    ElMessage.error("文件不存在")
    return
  }
  ElMessageBox.confirm(
    '确认是否要分析此文件?',
    '系统提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const sendData={
        id:file.id,
        url:file.url,
        mediaType:file.mediaType?file.mediaType:'text/plain'
      }
      console.log('sendData', sendData);
      
      WebDiskFileApi.analysisWebDiskFile(props.flowId,sendData).then(()=>{
        ElMessage({
          type: 'success',
          message: '分析成功',
        })
        loadDirAndFile()
      })
    })
}
onMounted(()=>{
  loadDirAndFile()
})
</script>

<template>
  <div>
    <div class="tool">
      <el-button :disabled="!his.length" @click="back" link><el-icon :size="18"><BackIcon /></el-icon></el-button>
      <div style="margin-left: auto">
        <el-input v-model="fileName" class="!w-240px" clearable @clear="loadDirAndFile"/>
        <el-button style="margin-left: 10px" @click="loadDirAndFile">搜索</el-button>
      </div>
      <el-radio-group v-model="searchType" @change="searchChange" border>
        <el-radio-button label="全部" value="ALL" />
        <el-radio-button label="仅目录" value="DIR" />
        <el-radio-button label="仅文件" value="FILE" />
      </el-radio-group>
      <el-dropdown @command="command">
        <el-button link style="margin: 0">
          上传
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="create-dir">创建文件夹</el-dropdown-item>
            <el-dropdown-item command="upload-file">上传文件</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <el-row>
      <template v-for="dir in dirs" :key="dir.id">
        <el-col>
          <Dir :dir="dir" @ok="updateDir" @click="()=>changeDir(dir)" @delete="deleteFile" />
        </el-col>
      </template>
      <template v-for="file in files" :key="file.id">
        <el-col>
          <File :file="file" @delete-f="deleteFile" @analysis="analysisFile(file)" />
        </el-col>
      </template>
    </el-row>
  </div>
  <file-upload-batch ref="uploader" :dir-id="currentOpenDir" :space-id="props.id" @ok="loadDirAndFile()"/>
</template>

<style scoped lang="scss">
.tool{
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 20px;
}
</style>
